<template>
	<div style="margin-left: 22%">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<template #header>
						<div class="clearfix">
							<span>基础信息</span>
						</div>
					</template>
					<div class="info">
            <el-avatar :size="100" :src="avatarImg" />
						<div class="info-name">{{ name }}</div>
						<div class="info-desc">AvavaAvAAwawa</div>
					</div>
          <el-form label-width="90px">
            <el-form-item label="用户名：">
<!--              {{ name }}-->
              <el-input v-model="name" disabled  />
            </el-form-item>
            <el-form-item label="旧密码：">
              <el-input type="password" v-model="form.old" clearable ></el-input>
            </el-form-item>
            <el-form-item label="新密码：">
              <el-input type="password" v-model="form.new" clearable ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" >保存</el-button>
            </el-form-item>
          </el-form>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script setup lang="ts" name="user">
import { reactive, ref } from 'vue';
import 'cropperjs/dist/cropper.css';
import avatar from '../assets/img/ava.jpg';
import { changePassword } from '../api/index';
import { ElMessage } from 'element-plus'


const name:string|null = localStorage.getItem('ms_username');
const form = reactive({
	old: '',
	new: '',
});
const onSubmit = () => {
  changePassword(name,form).then(res =>{
    if (res.data.code != 200) {
      ElMessage.error(res.data.msg)
    } else {
      ElMessage.success('修改成功')
    }
  })
};

const avatarImg = ref(avatar);
const imgSrc = ref('');
const dialogVisible = ref(false);



</script>

<style scoped>
.info {
	text-align: center;
	padding: 35px 0;
}
.info-image {
	position: relative;
	margin: auto;
	width: 100px;
	height: 100px;
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 50px;
	overflow: hidden;
}

.info-edit {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.info-edit i {
	color: #eee;
	font-size: 25px;
}
.info-image:hover .info-edit {
	opacity: 1;
}
.info-name {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 500;
	color: #262626;
}
.crop-demo-btn {
	position: relative;
}
.crop-input {
	position: absolute;
	width: 100px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
</style>
